<template>
  <div>
    <router-view v-if="route.matched.length === 3" @updated="handleUpdated" />
    <template v-else>
      <!-- 基本联系人 -->
      <e-container>
        <a-space>
          <e-title title="Basic Contact" />
          <a-divider type="vertical" />
          <a-button
            v-permission="'Contact:Add'"
            type="link"
            size="small"
            @click="() => router.push({ name: 'Contact Edit', params: { action: 'create' } })"
          >
            <a-space>
              <e-icon type="add" line-height="22px" />
              Add
            </a-space>
          </a-button>
        </a-space>
        <a-divider />
        <a-table
          v-permission="'Contact:Query'"
          :columns="columns"
          :data-source="contacts"
          :pagination="false"
          :loading="loading"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'contactName' && isDetail">
              <router-link :to="{ name: 'Contact Detail', params: { id: clientId, contactId: record.id } }">
                {{ record.contactName }}
              </router-link>
            </template>
            <template v-if="column.key === 'countryID'">
              <a-space>
                <e-country-or-region v-if="record.countryID" :code="record.countryID" /> <span v-else>--</span>
              </a-space>
            </template>
            <template v-if="column.key === 'operation'">
              <a-button
                v-permission="'Contact:Edit'"
                type="link"
                size="small"
                @click="
                  () =>
                    router.push({
                      name: 'Contact Edit',
                      params: { action: 'edit', id: clientId, contactId: record.id }
                    })
                "
              >
                <a-space>
                  <e-icon type="edit" line-height="22px" />
                  Edit
                </a-space>
              </a-button>
            </template>
          </template>
        </a-table>
      </e-container>
      <!-- 部门联系人 -->
      <e-container style="margin-top: 24px">
        <a-space>
          <e-title title="Department Contact" />
          <a-divider type="vertical" />
          <a-button
            v-permission="'Contact:Add'"
            type="link"
            size="small"
            @click="() => router.push({ name: 'Department Contact Edit', params: { action: 'create' } })"
          >
            <a-space>
              <e-icon type="add" line-height="22px" />
              Add
            </a-space>
          </a-button>
        </a-space>
        <a-divider />
        <a-table
          v-permission="'Contact:Query'"
          :columns="departmentContactColumns"
          :data-source="departmentContacts"
          :pagination="false"
          :loading="departmentLoading"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'contactName' && isDetail">
              {{ record.contactName }}
            </template>
            <template v-if="column.key === 'operation'">
              <a-space>
                <a-button
                  v-permission="'Contact:Edit'"
                  type="link"
                  size="small"
                  @click="
                    () =>
                      router.push({
                        name: 'Department Contact Edit',
                        params: { action: 'edit', id: clientId, contactId: record.id }
                      })
                  "
                >
                  <a-space>
                    <e-icon type="edit" line-height="22px" />
                    Edit
                  </a-space>
                </a-button>
                <a-button
                  v-permission="'Contact:Delete'"
                  type="link"
                  size="small"
                  style="color: #fc4b3b"
                  @click="handleCheckDelete(record.id)"
                >
                  <a-space>
                    <e-icon type="delete" line-height="22px" />
                    Delete
                  </a-space>
                </a-button>
              </a-space>
            </template>
          </template>
        </a-table>
      </e-container>
    </template>
  </div>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import EContainer from '@/components/EContainer.vue'
import ETitle from '@/components/ETitle.vue'
import EIcon from '@/components/EIcon.vue'
import columns from './contact/columns.js'
import departmentContactColumns from './contact/departmentContact/columns.js'
import Contact from '@/api/client/contact.js'
import ECountryOrRegion from '@/components/ECountryOrRegion.vue'
import { CONTACT_DELETE_SUCCESS, SURE_TO_DELETE } from '@/constants/message.js'
const { Modal, message } = inject('Feedback')
const router = useRouter()
const route = useRoute()
const clientId = route.params.id
const contacts = ref([])
const departmentContacts = ref([])
const loading = ref(true)
const departmentLoading = ref(true)
const store = useStore()
const isDetail = ref()
const permissions = computed(() => store.state.client.permissions)
permissions.value.forEach(item => {
  if (item.auth === 'Contact:Detail') {
    isDetail.value = true
  }
})
store.dispatch('dict/getCountriesOrRegions')
const loadData = () => {
  loading.value = true
  Contact.list(clientId)
    .then(res => {
      contacts.value = res.data
    })
    .finally(() => {
      loading.value = false
    })
}
const loadDepartmentData = () => {
  departmentLoading.value = true
  Contact.listDepartment(clientId)
    .then(res => {
      departmentContacts.value = res.data
    })
    .finally(() => {
      departmentLoading.value = false
    })
}
loadData()
loadDepartmentData()
const handleUpdated = () => {
  loadData()
  loadDepartmentData()
}
const handleCheckDelete = contactId => {
  Modal.confirm({
    content: SURE_TO_DELETE,
    okButtonProps: { danger: true },
    okText: 'Confirm',
    onOk: () => {
      Contact.deleteDepartmentContact(contactId).then(res => {
        if (!res.data) {
          message.warning(res.message)
        } else {
          message.success(CONTACT_DELETE_SUCCESS)
          loadDepartmentData()
        }
      })
    }
  })
}
</script>

<style lang="less" scoped>
@import '@/assets/style/reset_table';
</style>
<route lang="yaml">
name: Client Contact
path: '/client/:id/contact'
meta:
  title: Contact
  sort: 20
  icon: Customer_Contact
  permission: Contact
</route>
